<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
    <title>闪烁动画</title>
    <style>
        html,
        body,
        #mapui {
            width: 100%;
            height: 100%;
        }
        
        html,
        body {
            margin: 0;
            padding: 0;
        }
        
        #button11 {
            position: fixed;
            bottom: 40px;
            left: 0px;
            z-index: 2000;
        }
        
        #Radius {
            position: fixed;
            bottom: 40px;
            right: 0px;
            z-index: 2000;
        }
        
        #button11 input {
            height: 50px;
        }
    </style>
</head>

<body>
    <div id="mapui"></div>
    <div class='map-overlay top' style="z-index: 9999; width: 250px;">
        <div class='map-overlay-inner'>
            <div id='button11'>
                <input id="start" type="button" value="开始">
                <input id="stop" type="button" value="暂停">
                <input id="remove" type="button" value="移除">
            </div>
            <div id='Radius'>
                <label>半径</label>
                <input type="range" min="0.5" max="50" value="6" id="radiusValue" />
            </div>
        </div>
    </div>

    <script src="./js_example/script/map.min.js"></script>
    <script src="./js_example/script/psr.min.js"></script>
    <script src="./js_example/script/demo.js"></script>
    <script>
        var amap = null;
        var psrmap = null;
        var init = false;
        var svg = null;
        map.Factory.create('mapui', {
            style: style, //"minemap://service/solu/style/id/12762",
            center: center,
            zoom: 4,
            strategy: ['mapboxgl', 'openlayers', 'leaflet'],
        }, (o) => {
            amap = o;
            init = true;
            this.addPSR();
        });
        psr.Config
        psr.Identify.connect();

        function addPSR() {
            let self = this;
            let str = '';
            this.psrmap = new psr.PSRMap(this.amap.pmap);
            this.psrmap.addPSR([], ['Microsoft YaHei UI Regular']);
            var ScatterAnimation = new psr.Visual.Animations.ScatterAnimation(this.amap, [113.3, 23.2], 6, '#bd0026');
            ScatterAnimation.start();

            var start = document.getElementById("start");
            start.onclick = function() {
                ScatterAnimation.start();
            };
            var stop = document.getElementById("stop")
            stop.onclick = function() {
                ScatterAnimation.stop();
            };
            var remove = document.getElementById("remove")
            remove.onclick = function() {
                ScatterAnimation.remove();
            };
            var radiusValue = document.getElementById("radiusValue");
            radiusValue.onchange = function() {
                    ScatterAnimation.setCenterRadius(Number(radiusValue.value));
                }
                // ScatterAnimation.setCenterColor('#253494'); //设置中心颜色
                // ScatterAnimation.setEdgeColor('#253494'); //设置边缘颜色
        }
    </script>
</body>

</html>